{% extends 'base.html' %}

{% block title %}确认删除{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script src="https://cdn.ckeditor.com/4.21.0/standard-all/ckeditor.js"></script>
  <script>
    $(document).ready(function() {
        // 初始化CKEditor为只读模式用于预览
        CKEDITOR.replace('question-content', {
            readOnly: true,
            toolbar: [],
            removePlugins: 'exportpdf',
            height: 300,
            on: {
                instanceReady: function() {
                        // 隐藏编辑器容器
                        this.container.hide();
                        // 将编辑器内容同步到预览区域
                        $('#question-preview').html(this.getData());
                        // 触发MathJax渲染
                        if (window.MathJax) {
                            MathJax.typesetPromise([document.getElementById('question-preview')]).catch(err => console.log('MathJax渲染错误:', err));
                        }
                    }
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="container mt-4">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <h2>确认删除</h2>
            </div>
            <div class="card-body">
                <h4 class="card-title">确定要删除这条错题吗？</h4>
                <p class="card-text"><strong>标题:</strong> {{ mistake.title }}</p>
                <div class="form-group">
                    <label><strong>题目:</strong></label>
                    <textarea id="question-content">{{ mistake.question|safe }}</textarea>
                    <div id="question-preview" class="border p-3 bg-light min-h-[200px]"></div>
                </div>
                <p class="card-text"><strong>学科:</strong> {{ mistake.subject.name }}</p>
                <p class="card-text"><strong>知识点:</strong> {{ mistake.knowledge_point.name }}</p>
                <p class="card-text"><strong>星级:</strong> {{ mistake.star_rating }}</p>
                <p class="text-danger">此操作不可撤销，删除后数据将永久丢失。</p>

                <form method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">确认删除</button>
                    <a href="{% url 'core:mistake_list' %}" class="btn btn-outline-secondary ml-2">取消</a>
                </form>
            </div>
        </div>
    </div>
{% endblock %}